<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border:1px solid red ; "></canvas>
			<button id="button">清楚画面</button>
	</body>
	<script>
		window.onload=function(){
			var canvas=document.getElementById("canvas");
			var cxt=canvas.getContext("2d");
			canvas.width=500;
			canvas.height=400;
			airboard();
			function airboard(){
				for(var i =0;i<5;i++){
				for (var j=0;j<6;j++){
					cxt.fillStyle="rgb("+(255-30*i)+","+(255-30*j)+",250)";
					cxt.fillRect(25*i,25*j,25,25);
				}
			}
		}
			document.onclick=function(e){
				for(var i =0;i<5;i++){
				for (var j=0;j<6;j++){
					if(e.offsetX>=20*j&&e.offsetX<=25*j+25&&e.offsetY>=25*i&&e.offsetY<=25*i+25){
						cxt.strokeStyle="rgb("+(255-30*i)+","+(255-30*j)+",250)";
						console.log(i,j);
						console.log("rgb("+(255-30*i)+","+(255-30*j)+",250)");
					}
				}
			}
		}
			var canvasx = canvas.getBoundingClientRect().left;
				var canvasy = canvas.getBoundingClientRect().top;
				console.log(canvasx);
				console.log(canvasy);
				canvas.addEventListener("mousedown",downfun);
				canvas.addEventListener("mousemove",movefun);
				canvas.addEventListener("mouseup",upfun);
				var startx;//起始坐标x
				var starty;//起始坐标y
				var endx;//结束坐标x
				var endy;//结束坐标y
				cxt.lineWidth=3;
				var offon=false;
				function downfun(e){
					offon=true;
					startx=e.clientX-canvasx;
					starty=e.clientY-canvasy;
				}
				function movefun(e){
					if(offon ==true){
					cxt.beginPath()
					endx=e.clientX-canvasx;
					endy=e.clientY-canvasy;
					cxt.moveTo(startx,starty);
					cxt.lineTo(endx,endy);
					cxt.stroke();
					cxt.closePath();
					startx=endx;
					starty=endy;
					console.log("1111");
					}
				}
				function upfun(){
					offon=false;
					cxt.closePath();
				}
				document.getElementById("button").onclick=function(){
					cxt.clearRect(0,0,canvas.width,canvas.height);
					airboard();
				}
			}
			
			

	</script>
</html>
